<template>
  <div class="app-container">
    <el-form>
      <el-form-item label="关于我">
        <el-input placeholder="请输入url地址" v-model="url" :disabled="this.isDisable">
        </el-input>
      </el-form-item>
      <el-button type="primary" plain @click="btn_isEdit_Handle">{{ btnText }}</el-button>
    </el-form>
  </div>
</template>

<script>
import * as about_API from "@/api/about.js"
export default {
  data() {
    return {
      isDisable: true, //是否禁用
      url: '',//url地址
      btnText: '编辑',
    }
  },
  created() {
    this.fetchUrl()
  },
  methods: {
    async fetchUrl() {
      const data = await about_API.getAbout()
      this.url = data.data
      console.log(data, ':::created拿url地址');

    },
    async btn_isEdit_Handle() {
      if (this.btnText === '编辑') {
        this.isDisable = !this.isDisable
        this.btnText = '完成'
      } else {
        if (this.url) {
          // 编辑完成，更新内容
          this.isDisable = !this.isDisable
          this.btnText = '编辑'
          const result = await about_API.postAbout({ url: this.url })
          console.log(result, 'result-=-result-=-result');
          this.$message.success('修改成功')
        } else {
          this.$message.error('地址不能为空')
        }
      }
    }
  }
}
</script>

<style scoped></style>
